<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>${fns:getConfig('productName')} 登录</title>
		<meta name="decorator" content="default"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link href="${ctxStatic}/3rdlib/loginbg/init.css"  type="text/css" rel="stylesheet" />
		<script type="text/javascript">
			var _name = 'login';
		</script>
		<style type="text/css">
			body {
				background-color: #326696;
				margin: 0px;
				overflow: hidden;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				font-weight: bold;
				text-align:center;
			}
			a {
				color:#0078ff;
			}
		</style>
	</head>

	<body class="login-layout">
		<script src="${ctxStatic}/3rdlib/loginbg/Detector.js"></script>
		<script src="${ctxStatic}/3rdlib/loginbg/three.min.js"></script>
		<script src="${ctxStatic}/modules/core/sysLogin.js"></script>
		<script id="vs" type="x-shader/x-vertex">
			varying vec2 vUv;
			void main() {
				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}
		</script>
		<script id="fs" type="x-shader/x-fragment">
			uniform sampler2D map;
			uniform vec3 fogColor;
			uniform float fogNear;
			uniform float fogFar;
			varying vec2 vUv;

			void main() {
				float depth = gl_FragCoord.z / gl_FragCoord.w;
				float fogFactor = smoothstep( fogNear, fogFar, depth );
				gl_FragColor = texture2D( map, vUv );
				gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
			}
		</script>

		<script type="text/javascript">			
			//if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
				var container;
				var camera, scene, renderer;
				var mesh, geometry, material;
	
				var mouseX = 0, mouseY = 0;
				var start_time = Date.now();
	
				var windowHalfX = window.innerWidth / 2;
				var windowHalfY = window.innerHeight / 2;

			$(document).ready(function() {
				init();
			});
			
			function init() {
				if ( ! Detector.webgl ) {
					$.gritter.add({
						title: '错误',
						text: '您的浏览器不支持WEB GL,请确认开启或者升级浏览器。',
						image: IMG_WARN,
						sticky: false,		
						class_name: 'gritter-info gritter-light'
					});
					return;
				}
				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// Bg gradient

				var canvas = document.createElement( 'canvas' );
				canvas.width = 32;
				canvas.height = window.innerHeight;

				var context = canvas.getContext( '2d' );

				var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
				gradient.addColorStop(0, "#1e4877");
				gradient.addColorStop(0.5, "#4584b4");

				context.fillStyle = gradient;
				context.fillRect(0, 0, canvas.width, canvas.height);

				container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
				container.style.backgroundSize = '32px 100%';

				//

				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 3000 );
				camera.position.z = 6000;

				scene = new THREE.Scene();

				geometry = new THREE.Geometry();

				var texture = THREE.ImageUtils.loadTexture( '${ctxStatic}/images/cloud10.png', null, animate );
				texture.magFilter = THREE.LinearMipMapLinearFilter;
				texture.minFilter = THREE.LinearMipMapLinearFilter;

				var fog = new THREE.Fog( 0x4584b4, - 100, 3000 );

				material = new THREE.ShaderMaterial( {

					uniforms: {

						"map": { type: "t", value: texture },
						"fogColor" : { type: "c", value: fog.color },
						"fogNear" : { type: "f", value: fog.near },
						"fogFar" : { type: "f", value: fog.far },

					},
					vertexShader: document.getElementById( 'vs' ).textContent,
					fragmentShader: document.getElementById( 'fs' ).textContent,
					depthWrite: false,
					depthTest: false,
					transparent: true

				} );

				var plane = new THREE.Mesh( new THREE.PlaneGeometry( 64, 64 ) );

				for ( var i = 0; i < 8000; i++ ) {

					plane.position.x = Math.random() * 1000 - 500;
					plane.position.y = - Math.random() * Math.random() * 200 - 15;
					plane.position.z = i;
					plane.rotation.z = Math.random() * Math.PI;
					plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;

					THREE.GeometryUtils.merge( geometry, plane );

				}

				mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );

				mesh = new THREE.Mesh( geometry, material );
				mesh.position.z = - 8000;
				scene.add( mesh );

				renderer = new THREE.WebGLRenderer( { antialias: false } );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onDocumentMouseMove( event ) {

				mouseX = ( event.clientX - windowHalfX ) * 0.25;
				mouseY = ( event.clientY - windowHalfY ) * 0.15;

			}

			function onWindowResize( event ) {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				position = ( ( Date.now() - start_time ) * 0.03 ) % 8000;

				camera.position.x += ( mouseX - camera.position.x ) * 0.01;
				camera.position.y += ( - mouseY - camera.position.y ) * 0.01;
				camera.position.z = - position + 8000;

				try {
					renderer.render( scene, camera );
				} catch (e) {
					console.log('NOT SUPPORT WEBGL.USING DEFAUL LOGIN BG.')
				}
			}
		</script>
		<div style="position:fixed;padding-top:9%;padding-left:32%">
			<div id="mainContainer" class="col-sm-10 col-sm-offset-1">
				<div class="login-container">
					<div class="text-left">
						<h1>
							<span class="red">${fns:getConfig('productName')}</span>
						</h1>
					</div>
					<div class="center">
						<h4 class="blue">${fns:getConfig('releaseSubtitle')}</h4>
					</div>
	
					<div class="space-6"></div>
	
					<div class="position-relative">
						<div id="login-box" class="login-box visible widget-box no-border">
							<div class="widget-body">
								<div class="widget-main">
									<h5 class="blue">
									<tags:message content="${message}"/>
										输入用户登录信息
										</h4>
										<div class="space-6"></div>
										<form action="${ctx}/login" method="post">
											<fieldset>
												<label class="block clearfix"> <span
													class="block input-icon input-icon-right"> <input
														type="text" id="username" name="username"
														class="form-control" placeholder="用户名" /> <i
														class="icon-user"></i>
												</span>
												</label> <label class="block clearfix"> <span
													class="block input-icon input-icon-right"> <input
														type="password" id="password" name="password"
														class="form-control" placeholder="密码" /> <i
														class="icon-lock"></i>
												</span>
												</label>
	
												<div class="space"></div>
	
												<div class="clearfix">
													<button type="submit"
														class="width-35 pull-right btn btn-sm btn-primary">
														<i class="icon-key"></i> 登录
													</button>
												</div>
	
												<div class="space-4"></div>
											</fieldset>
										</form>
								</div>
								<!-- /widget-main -->
							</div>
							<!-- /widget-body -->
						</div>
						<!-- /login-box -->
					</div>
					<!-- /position-relative -->
				</div>
			</div>
			<%-- <div class="main-container">
					<div class="main-content">
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<div class="row">
							<div class="col-sm-10 col-sm-offset-1">
								<div class="login-container">
									<div class="left">
										<h1>
											<span class="red">${fns:getConfig('productName')}</span>
										</h1>
									</div>
									<div class="center">
										<h4 class="blue">${fns:getConfig('releaseSubtitle')}</h4>
									</div>
		
									<div class="space-6"></div>
		
									<div class="position-relative">
										<div id="login-box"
											class="login-box visible widget-box no-border">
											<div class="widget-body">
												<div class="widget-main">
													<h5 class="blue">
														输入用户登录信息
														</h4>
														<div class="space-6"></div>
														<form action="${ctx}/login" method="post">
															<fieldset>
																<label class="block clearfix"> <span
																	class="block input-icon input-icon-right"> <input
																		type="text" id="username" name="username"
																		class="form-control" placeholder="用户名" /> <i
																		class="icon-user"></i>
																</span>
																</label> <label class="block clearfix"> <span
																	class="block input-icon input-icon-right"> <input
																		type="password" id="password" name="password"
																		class="form-control" placeholder="密码" /> <i
																		class="icon-lock"></i>
																</span>
																</label>
		
																<div class="space"></div>
		
																<div class="clearfix">
																	<button type="submit"
																		class="width-35 pull-right btn btn-sm btn-primary">
																		<i class="icon-key"></i> 登录
																	</button>
																</div>
		
																<div class="space-4"></div>
															</fieldset>
														</form>
												</div>
												<!-- /widget-main -->
											</div>
											<!-- /widget-body -->
										</div>
										<!-- /login-box -->
									</div>
									<!-- /position-relative -->
								</div>
							</div>
							<!-- /.col -->
						</div>
						<!-- /.row -->
					</div>
				</div>
				<!-- /.main-container --> --%>
		</div>
		<!-- basic scripts -->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>

		<!-- inline scripts related to this page -->

		<script type="text/javascript">
			function show_box(id) {
			 jQuery('.widget-box.visible').removeClass('visible');
			 jQuery('#'+id).addClass('visible');
			}
			
			//jQuery方式  
			$(document).ready(function(){
				$('mainContainer').addClass('login-layout');
			});			
		</script>	
</body>
</html>
